<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const systemConfig = ref({
  siteName: '设备租赁管理系统',
  siteDescription: '专业的设备租赁管理平台',
  defaultRentalDays: 7,
  maxRentalDays: 30,
  depositRatio: 2.0,
  autoReturnDays: 1,
  enableNotifications: true,
  enableEmailNotifications: true,
  enableSmsNotifications: false
})

const saveSettings = () => {
  ElMessage.success('系统设置保存成功')
}

const resetSettings = () => {
  ElMessage.info('设置已重置为默认值')
}
</script>

<template>
  <div class="system-settings">
    <h1>系统设置</h1>
    
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card>
          <template #header>
            <h3>基本设置</h3>
          </template>
          
          <el-form :model="systemConfig" label-width="120px">
            <el-form-item label="网站名称">
              <el-input v-model="systemConfig.siteName" />
            </el-form-item>
            
            <el-form-item label="网站描述">
              <el-input 
                v-model="systemConfig.siteDescription" 
                type="textarea" 
                :rows="3"
              />
            </el-form-item>
            
            <el-form-item label="默认租赁天数">
              <el-input-number 
                v-model="systemConfig.defaultRentalDays" 
                :min="1" 
                :max="365"
              />
            </el-form-item>
            
            <el-form-item label="最大租赁天数">
              <el-input-number 
                v-model="systemConfig.maxRentalDays" 
                :min="1" 
                :max="365"
              />
            </el-form-item>
            
            <el-form-item label="押金倍数">
              <el-input-number 
                v-model="systemConfig.depositRatio" 
                :min="0" 
                :precision="1"
                :step="0.5"
              />
            </el-form-item>
            
            <el-form-item label="自动归还天数">
              <el-input-number 
                v-model="systemConfig.autoReturnDays" 
                :min="0" 
                :max="30"
              />
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
      
      <el-col :span="12">
        <el-card>
          <template #header>
            <h3>通知设置</h3>
          </template>
          
          <el-form :model="systemConfig" label-width="120px">
            <el-form-item label="启用通知">
              <el-switch v-model="systemConfig.enableNotifications" />
            </el-form-item>
            
            <el-form-item label="邮件通知">
              <el-switch 
                v-model="systemConfig.enableEmailNotifications"
                :disabled="!systemConfig.enableNotifications"
              />
            </el-form-item>
            
            <el-form-item label="短信通知">
              <el-switch 
                v-model="systemConfig.enableSmsNotifications"
                :disabled="!systemConfig.enableNotifications"
              />
            </el-form-item>
          </el-form>
          
          <div class="notification-info">
            <el-alert
              title="通知说明"
              type="info"
              description="系统将在设备到期、逾期等情况下自动发送通知给用户"
              show-icon
              :closable="false"
            />
          </div>
        </el-card>
        
        <el-card style="margin-top: 20px">
          <template #header>
            <h3>数据统计</h3>
          </template>
          
          <el-descriptions :column="1" border>
            <el-descriptions-item label="系统运行时间">7小时</el-descriptions-item>
            <el-descriptions-item label="数据库大小">2.5 MB</el-descriptions-item>
            <el-descriptions-item label="总用户数">3人</el-descriptions-item>
            <el-descriptions-item label="总订单数">5个</el-descriptions-item>
            <el-descriptions-item label="系统版本">v1.0.0</el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
    </el-row>
    
    <div class="action-buttons">
      <el-button type="primary" @click="saveSettings">保存设置</el-button>
      <el-button @click="resetSettings">重置为默认</el-button>
    </div>
  </div>
</template>

<style scoped>
.system-settings {
  padding: 20px;
}

.system-settings h1 {
  margin-bottom: 30px;
  color: #303133;
}

.notification-info {
  margin-top: 20px;
}

.action-buttons {
  margin-top: 30px;
  text-align: center;
}

.action-buttons .el-button {
  margin: 0 10px;
}
</style>